<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>数据显示</title>
    <link rel="stylesheet" href="css/layui.css"  media="all">
    <script type="text/javascript" src="layui.js"></script>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <style type="text/css">
        .op {
           height: 800px;
        }
    </style>
</head>


<body>

<div class="layui-tab" lay-filter="tab1">
    <ul class="layui-tab-title" >
        <li class="layui-this" lay-id="1">基础算法对比</li>
        <li lay-id="2">算法模型对比数据</li>
        <li lay-id="3">算法优化对比数据</li>
        <li lay-id="5">算法性能对比</li>
        <li lay-id="4">文档笔记与心得</li>
        <li lay-id="6">自定义查看</li>
    </ul>
<!--    原始对比-->
    <div class="layui-tab-content">

        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="op" id="time1">正在加载，请稍后。。。。。</div>
            </div>
        </div>

<!--        算法原型对比数据-->
        <div class="layui-tab-item">

            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <select name="exam"  lay-filter="prototype"  id="prototype">
                            <option value="rcnn">RCNN</option>
                            <option value="yolo">yolo</option>
                            <option value="retinanet">retinanet</option>
                            <option value="mask">mask</option>
                            <option value="fcos">fcos</option>
                            <option value="cornernet">cornernet</option>
                        </select>
                    </div>
                </div>
            </form>
            <div class="layui-container">
                <div class="op" id="time2">正在加载，请稍后。。。。。</div>
            </div>

        </div>
<!--        算法优化对比数据-->
        <div class="layui-tab-item">

            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <select name="exam"  lay-filter="advance" id="advance" >
                            <option value="involution">involution</option>
                            <option value="cascade">cascade</option>
                            <option value="grid">grid</option>
                            <option selected="" value="sabl">sabl</option>
                            <option value="atss">atss</option>
                            <option value="tridentnet">tridentnet</option>
<!--                            <option value="involution">sparse</option>-->
                            <option value="free_anchor">free_anchor</option>
                        </select>
                    </div>
                </div>
            </form>
            <div class="layui-container">
                <div class="op" id="time3">正在加载，请稍后。。。。。</div>
            </div>

        </div>
<!--性能对比-->
        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="op" id="time5">正在加载，请稍后。。。。。</div>
            </div>
        </div>

<!--        笔记整理-->
        <div class="layui-tab-item">
            <table class="layui-table" lay-data="{width: 1240, height:600, url:'/getnote', page:true, id:'idTest'}" lay-filter="demo">
                <thead>
                    <tr>
                        <!--<th lay-data="{type:'checkbox', fixed: 'left'}"></th>-->
                        <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
                        <th lay-data="{field:'name', width:580, sort: true, fixed: true}">笔记名称</th>
                        <th lay-data="{field:'updatetime', width:180}">更新时间</th>
                        <th lay-data="{field:'furl', width:200, sort: true}">访问链接</th>
                        <th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>
                    </tr>
                </thead>
            </table>
        </div>

        <!--自定义数据查看-->
        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="op" id="time6">正在加载，请稍后。。。。。</div>
            </div>
        </div>

    </div>
</div>




<!--select框的-->
<script>
    layui.use('form', function(){
        var form = layui.form;
        //原型
        form.on('select(prototype)', function(data){
            // 基于准备好的dom，初始化echarts实例
            var dom = echarts.init(document.getElementById('time2'));
            var accurl = "/getscorebyprototype/"+data.value;
            getdata(dom,accurl);
        });

        //改进
        form.on('select(advance)', function(data){
            var dom = echarts.init(document.getElementById('time3'));
            var accurl = "/getscorebyadvance/"+data.value;
            getdata(dom,accurl);
        });
    });
</script>

<!--tab框的-->
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        element.on('tab(tab1)', function(data){
            var lay_id = $(this).attr('lay-id');
            // 算法原型对比数据
            if(lay_id==='2'){
                var dom = echarts.init(document.getElementById('time2'));
                var accurl = "/getscorebyprototype/rcnn";
                getdata(dom,accurl);
            }
            if(lay_id==='3'){
                var dom = echarts.init(document.getElementById('time3'));
                var accurl = "/getscorebyadvance/sabl";
                getdata(dom,accurl);
            }
            if(lay_id==='5'){//性能对比
                var dom = echarts.init(document.getElementById('time5'));
                var accurl = "/performance";
                getperformance(dom,accurl);
            }

            if(lay_id==='6'){//自定义对比
                var dom = echarts.init(document.getElementById('time6'));
                var accurl = "/getcustom";
                getdata(dom,accurl);
            }
        });
    });
</script>
    <script type="text/javascript">

        function getdata(time1,url) {
            var data=[];
            $.ajax(
                {
                    url: url,
                    dataType: "json"
                }
            ).done(function (ret) {
                data = ret;

                // 基于准备好的dom，初始化echarts实例
                // var time1 = echarts.init(document.getElementById('time1'));

                var posList = [
                    'left', 'right', 'top', 'bottom',
                    'inside',
                    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                ];
                app={};

                app.configParameters = {
                    rotate: {
                        min: -90,
                        max: 90
                    },
                    align: {
                        options: {
                            left: 'left',
                            center: 'center',
                            right: 'right'
                        }
                    },
                    verticalAlign: {
                        options: {
                            top: 'top',
                            middle: 'middle',
                            bottom: 'bottom'
                        }
                    },
                    position: {
                        options: posList.reduce(function (map, pos) {
                            map[pos] = pos;
                            return map;
                        }, {})
                    },
                    distance: {
                        min: 0,
                        max: 100
                    }
                };


                app.config = {
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle',
                    position: 'insideBottom',
                    distance: 15,
                    onChange: function () {
                        var labelOption = {
                            normal: {
                                rotate: app.config.rotate,
                                align: app.config.align,
                                verticalAlign: app.config.verticalAlign,
                                position: app.config.position,
                                distance: app.config.distance
                            }
                        };
                        myChart.setOption({
                            series: [{
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }]
                        });
                    }
                };


                var labelOption = {
                    show: true,
                    position: app.config.position,
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c}  {name|{a}}',
                    fontSize: 16,
                    rich: {
                        name: {
                        }
                    }
                };

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
//                        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
//                        data: ['faster_rcnn_r50_fpn_1x_coco', 'yolov3_d53_480_273e_coco', 'mask_rcnn_r50_fpn_1x_coco', 'retinanet_r50_fpn_1x_coco']
                        data: data.legend
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            axisLabel: {
                                interval:0,
                                rotate:40
                            },
                            textStyle: {
                                color: "#a9a9a9", //更改坐标轴文字颜色
                                fontSize: 10 //更改坐标轴文字大小
                            },
                            showMinLabel: true,//显示最小值
                            showMaxLabel: true,//显示最大值
//                          data: ['2012', '2013', '2014', '2015', '2016']
                            data:[ 'AP:IoU=0.50:0.95', 'AP:IoU=0.50', 'AP:IoU=0.75',
                                'AP:IoU=0.50:0.95|small', 'AP:IoU=0.50:0.95|medium ', 'AP:IoU=0.50:0.95|large',
                                'AR:maxDets=100', 'AR:maxDets=300', 'AR: maxDets=1000',
                                'AR:IoU=0.50:0.95|small', 'AR:IoU=0.50:0.95|medium ', 'AR:IoU=0.50:0.95|large']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    grid: {
                        left: '10%',
                        bottom:'25%'
                    },
                    series: data.series
                };

                time1.setOption(option,true)
            });
        }

        function getperformance(dom,url) {
            $.ajax(
                {
                    url: url,
                    dataType: "json"
                }
            ).done(function (ret) {
                console.log(ret)
                option = {
                    title: {
                        text: '性能表现'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['检测运行时间(task/s)', '模型大小(100M)']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            interval:0,
                            rotate:40
                        },
                        textStyle: {
                            color: "#a9a9a9", //更改坐标轴文字颜色
                            fontSize: 10 //更改坐标轴文字大小
                        },
                        data: ret.data
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: ret.series
                };
                dom.setOption(option,true)
            });
        }

        function load_advance(){
            $.ajax(
                {
                    url: '/getadvance',
                    dataType: "json"
                }
            ).done(function (ret) {
                console.log(ret)
                for (i=0;i<ret.length;i++){
                    console.log(ret[i].advance);
                    $("#advance").append("<option value="+ret[i].advance+">"+ret[i].advance+"</option>"); //为Select追加一个Option(下拉项)
                }
            });
        }

        function load_prototype(){
            $.ajax(
                {
                    url: '/getprototype',
                    dataType: "json"
                }
            ).done(function (ret) {
                console.log(ret)
                for (i=0;i<ret.length;i++){
                    console.log(ret[i].prototype);
                    $("#prototype").append("<option value="+ret[i].prototype+">"+ret[i].prototype+"</option>"); //为Select追加一个Option(下拉项)
                }
            });
        }


        var ops1 = echarts.init(document.getElementById('time1'));
        var accurl1 = "/getscorebyorign";
        var data = getdata(ops1,accurl1);


    </script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">访问笔记</a>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
               layer.msg('即将跳转笔记:'+data.name)
                window.location.href=data.furl
            }
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

<div>
    <a href="http://beian.miit.gov.cn/" target="_blank">陕ICP备2021003971号-1</a>
</div>
</body>
</html>